<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.如何处理多元变量-从数据到图表展现</title>
    <style>
        #app {
            border: 1px solid #ccc;
            width: 1200px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <!-- <script src="//lib.baomitu.com/d3/4.10.2/d3.js"></script> -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
    <script src="https://unpkg.com/@qcharts/core/dist/index.js"></script>

    <script type="module">

        (async function() {

            // 1.首先看我们有什么数据 (data.json)
            // 获取csv格式的文本数据（逗号或者回车分隔的文本）
            const rawData = await (await fetch('beijing_2014.csv')).text();
            // 将csv格式的数据转换成json
            const data = d3.csvParse(rawData);
            
            // 2.我们想了解什么：
            // 这里使用d3的方法对原始数据进行分类处理
            const dataset = data.filter(d => new Date(d.Date).getMonth() < 3)
            .map(d => {return {temperature: Number(d['Temperature(Celsius)(avg)']), date: d.Date, category: '平均气温'}});
            console.log(dataset);

            // 3.用哪种可视化方式呈现数据：折线图，使用qcharts图标库进行图表展示
            // 转换数据为坐标点信息
            const { Chart, Line, Legend, Tooltip, Axis } = qcharts;
            // 3.1创建图表
            const chart = new Chart({
                container:"#app"
            });
            let clientRect = { bottom: 50 };
            // 传入数据
            chart.source(dataset, {
                row:"category",
                value:"temperature",
                text:"date"
            });

            // 3.2使用Line对象创建图形
            const line = new Line({ clientRect });
            // 3.3创建横、纵两个坐标轴（Axis）、提示（ToolTip）和一个图例（Legend)
            const axisBottom = new Axis({clientRect}).style('grid', false);
            axisBottom.attr('formatter', d => '');

            const toolTip = new Tooltip({ 
                title: arr => { return arr.category }
            });
            const legend = new Legend();
            const axisLeft = new Axis({ orient: 'left',clientRect }).style('axis', false).style('scale', false);

            chart.append([line, axisBottom, axisLeft, toolTip, legend]);
        }());
    </script>
</body>
</html>